<template>
	<view>
		<view class='logo'>
			<image
				src='https://tse1-mm.cn.bing.net/th/id/OIP-C.RFgnRHK1YvW7-fUS-v8L1AAAAA?w=169&h=176&c=7&r=0&o=5&pid=1.7'>
			</image>
			<text>默认昵称</text>
		</view>

		<view class='lable'>请允许顺风车获取以下权限</view>
		<view class='text'>以下信息仅用于您登陆顺风车，我们将严格保密绝不外泄，更不会对您发送垃圾信息造成骚扰</view>
		<view :class='getUser?"lable-active":"lable"' style='margin-top:40rpx;'>获取您的公开信息（昵称，头像等）</view>
		<view class='text'>获取您的公开信息方便您使用全部功能</view>
		<view :class='getPhone?"lable-active":"lable"' style='margin-top:40rpx;'>授权手机号</view>
		<view class='text'>获取您的手机号用于注册登陆、实名认证</view>

		<block v-if="!getUser">
			<button @click="getuserinfo">第一步，获取公开信息</button>
		</block>

		<button open-type='getPhoneNumber' @getphonenumber="getPhoneNumber" hover-class='button-hover'
			v-if="!getPhone&&getUser">第二步，授权手机号</button>
		<button hover-class='button-hover' v-if="getPhone&&getUser">登陆中</button>
		<view class="login-tips">登录即代表您已同意 <view @click="goAgreement">《顺风车注册协议》</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				getUser: false,			//手用户信息获取状态
				getPhone: false,		//手机号获取状态
				userInfo: '',				//用户信息
				openid: '',					//openid
				mobile: '',					//手机号
				pid: '',						//邀请码
			};
		},
		onShow() {
			if (uni.getStorageSync('pid')) {
				this.pid = uni.getStorageSync('pid')
			}
		},
		methods: {
			...mapActions(['setUserInfo']),
			async getuserinfo() {
				// 获取用户信息
				let userInfo = await this.$tools.mpGetUserProfile()
				let code = await this.$tools.mpGetCode()
				console.log(code)
				this.login({
					code: code.code || '',
					pid: this.pid || ''
				}).then(res => {
					// if (res.code == 1) {
					// 	this.openid = res.data.openid
					// 	this.userInfo = userInfo.userInfo
					// 	uni.setStorageSync('token', res.data.userinfo.token)
					// 	this.getUser = true
					// }

					this.setUserInfo({data: {
							nickname: '脱缰胖虎',
							avatar: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.yp-D-KHI3e2nN4eMBJcEVAAAAA?w=186&h=186&c=7&r=0&o=5&pid=1.7',
							language: 'zh_CN'

						}})
					setTimeout(() => {
						uni.reLaunch({
							url: '../user/user'
						})
					}, 1000)
				})

			},
			getPhoneNumber(e) {
				uni.login({
					provider: 'weixin',
					success: loginInfo => {
						console.log(loginInfo, 'loginInfo');
						this.$api.getWechatMobile({
							code: loginInfo.code,
							iv: e.detail.iv,
							encryptedData: e.detail.encryptedData
						}).then(res => {
							console.log(res)
							if (res.code == 1) {
								this.mobile = res.data.phoneNumber
								this.getPhone = true
								this.login()
							} else {
								uni.showToast({
									title: '获取失败，请重试',
									icon: 'none'
								})
							}
						})
					}
				});

			},
			login() {
				console.log('登录')
				return new Promise((res, rej) => {
					res();
				})
				// this.$api.updateUserInfo({
				// 	openid: this.openid,
				// 	username: this.userInfo.nickName,
				// 	avatar: this.userInfo.avatarUrl,
				// 	area: '',
				// 	birthday: '',
				// 	// pid:this.pid
				// }).then(res => {
				// 	if (res.code == 1) {
				// 		this.$tools.toast('登录成功')
				// 		this.getUserInfo()
				// 		setTimeout(() => {
				// 			uni.reLaunch({
				// 				url: '../index/index'
				// 			})
				// 		}, 1000)
				// 	}
				// })


				// this.post('api/v1/wechat/register',{
				// 	openid:this.openid,
				// 	nickname:this.userInfo.nickName,
				// 	avatar:this.userInfo.avatarUrl,
				// 	mobile:this.mobile,
				// 	pid:this.pid
				// }).then(res=>{
				// 	console.log(res)
				// 	if(res.code==1){
				// 		uni.showToast({
				// 			title:'登录成功',
				// 			icon:'none'
				// 		})
				// 		uni.setStorageSync('userInfo',res.data)
				// 		uni.setStorageSync('token',res.data.token)
				// 		uni.setStorageSync('openid',res.data.openid)
				// 		setTimeout(()=>{
				// 			uni.reLaunch({
				// 				url:'../../home/home'
				// 			})
				// 		},1000)

				// 	}else{
				// 		uni.showToast({
				// 			title:'登录失败，请重试',
				// 			icon:'none'
				// 		})
				// 	}
				// })
			},
			goAgreement() {
				uni.navigateTo({
					url: './userAgreement/userAgreement'
				})
			}
		}
	}
</script>

<style lang="scss">
	.logo {
		width: 100%;
		height: 300rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-bottom: 50rpx;
	}

	.logo image {
		width: 120rpx;
		height: 120rpx;
	}

	.logo text {
		font-size: 30rpx;
		color: #474747;
		margin-top: 20rpx;
	}

	.lable {
		width: 90%;
		margin-left: 5%;
		font-size: 30rpx;
		color: #474747;
		font-weight: bold;
	}

	.text {
		width: 90%;
		margin-left: 5%;
		font-size: 26rpx;
		color: #8a8a8a;
		margin-top: 10rpx;
	}

	.lable-active {
		width: 90%;
		margin-left: 5%;
		font-size: 30rpx;
		color: #DBB366;
		font-weight: bold;
	}

	button {
		background: linear-gradient(90deg, #2B2A28, #4B4945);
		color: #fff;
		width: 90%;
		margin-left: 5%;
		margin-top: 100rpx;
		font-size: 30rpx;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.button-hover {
		opacity: 0.6;
		background: #DBB366;
		color: #fff;
	}

	.use-phoneNumber-login {
		width: 90%;
		position: fixed;
		bottom: 20rpx;
		left: 5%;
		margin-top: 50rpx;
		color: #256DF2;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.use-phoneNumber-login image {
		width: 100rpx;
		height: 100rpx;
	}

	.use-phoneNumber-login view {
		font-size: 24rpx;
		color: #8a8a8a;
		margin-top: 10rpx;
	}

	.use-phoneNumber-login .blue {
		color: #256DF2;
	}

	.login-tips {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #000;
		height: 100rpx;
	}

	.login-tips view {
		color: #256DF2;
	}
</style>
